<template>
  <div class="WorkingSchedule" v-loading="loading">
    <el-form ref="form" :model="form" label-position="top" class="myform">
      <div>
        <el-form-item label="加工厂" class="myform-item">
          <el-select
            v-model="form.supplier_id"
            placeholder="请选择"
            clearable
            @keyup.enter.native="onSearch"
          >
            <el-option
              v-for="item in factoryList"
              :key="item.supplier_id"
              :label="item.factory_name"
              :value="item.supplier_id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="加工单号" class="myform-item">
          <el-input
            v-model="form.processing_code"
            placeholder="请输入加工单号"
            clearable
            @keyup.enter.native="onSearch"
          />
        </el-form-item>
        <el-form-item label="款号" class="myform-item">
          <el-input
            v-model="form.type_no"
            placeholder="请输入款号"
            clearable
            @keyup.enter.native="onSearch"
          />
        </el-form-item>
        <el-form-item label="状态" class="myform-item">
          <el-select
            v-model="form.status"
            placeholder="请选择"
            clearable
            @keyup.enter.native="onSearch"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </div>
      <div>
        <el-form-item style="margin-top: 50px" class="myform-item">
          <el-button type="primary" @click="onSearch">查询</el-button>
        </el-form-item>
      </div>
    </el-form>
    <div style="margin: 20px 0">
      <el-button type="primary" @click="onUpdate"
        >更新成品加工单核价审核</el-button
      >
      <span style="margin-left: 30px">最后更新日期：{{ savetime }}</span>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      border
      :cell-style="changeCellStyle"
      :header-cell-style="changeHeaderCellStyle"
      size="mini"
    >
      <el-table-column
        label="成品加工单"
        align="center"
        prop="processing_code"
        fixed
        width="100px"
      ></el-table-column>
      <el-table-column
        label="款号"
        align="center"
        prop="type_no"
        fixed
      ></el-table-column>
      <el-table-column
        label="工厂合同号"
        align="center"
        prop="factory_contract_no"
        fixed
      ></el-table-column>
      <el-table-column
        label="供应商"
        align="center"
        prop="factory_name"
        fixed
      ></el-table-column>
      <el-table-column label="大货" align="center">
        <el-table-column
          label="核价编码"
          align="center"
          prop="big_pricing_number"
        >
          <template slot-scope="{ row }">
            <el-button type="text" @click="onLook(row.big_pricing_number)">{{
              row.big_pricing_number
            }}</el-button>
          </template>
        </el-table-column>
        <el-table-column
          label="成本加价总价"
          align="center"
          prop="big_pricing_price"
        ></el-table-column>
        <el-table-column
          label="成衣成本加价总价"
          align="center"
          prop="process_pricing_price"
        ></el-table-column>
      </el-table-column>
      <el-table-column label="实付" align="center">
        <el-table-column
          label="核价编码"
          align="center"
          prop="pay_pricing_number"
        >
          <template slot-scope="{ row }">
            <el-button type="text" @click="onLook(row.pay_pricing_number)">{{
              row.pay_pricing_number
            }}</el-button>
          </template>
        </el-table-column>
        <el-table-column
          label="成本加价总价"
          align="center"
          prop="pay_pricing_price"
        ></el-table-column>
        <el-table-column
          label="成衣成本加价总价"
          align="center"
          prop="pay_process_price"
        ></el-table-column>
      </el-table-column>

      <el-table-column label="差价" align="center" prop="difference_price">
        <template slot-scope="{ row }">
          <div
            :style="{
              color: Number(row.difference_price) >= 0 ? 'red' : '#67C23A',
            }"
          >
            {{ row.difference_price }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="理单员"
        align="center"
        prop="order_processor"
      ></el-table-column>
      <el-table-column label="状态" align="center" prop="status">
        <template slot-scope="{ row }">
          <div
            :style="{
              color:
                row.status == 2
                  ? '#67C23A'
                  : row.status == 3
                  ? 'red'
                  : row.status == 4
                  ? '#999999'
                  : '',
            }"
          >
            {{
              row.status == 0
                ? "未提交"
                : row.status == 1
                ? "待审核"
                : row.status == 2
                ? "已通过"
                : row.status == 3
                ? "未通过"
                : row.status == 4
                ? "已取消"
                : row.status == 5
                ? "已撤回"
                : ""
            }}
          </div>
          <div>
            <el-button
              type="text"
              size="default"
              @click="onLookRun(row.id, 6, row.run_id)"
              v-if="row.run_id"
              >审批进度</el-button
            >
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="历史价格变动(本次实付总价-首单实付总价)"
        align="center"
      >
        <el-table-column label="价格差" align="center" prop="pay_float">
          <template slot-scope="{ row }">
            <div v-if="row.pay_float_type == 0" style="color: red">
              {{ row.pay_float }}
            </div>
            <div v-else style="color: #67c23a">{{ row.pay_float }}</div>
          </template>
        </el-table-column>
        <el-table-column label="价差比例" align="center" prop="pay_float_lv">
          <template slot-scope="{ row }">
            <div v-if="row.pay_float_lv == 0 || row.pay_float_lv == null">
              -
            </div>
            <div v-else-if="row.pay_float_type == 0" style="color: red">
              {{ (row.pay_float_lv * 100) | numbertwo }}%
              <i class="el-icon-top"></i>
            </div>
            <div v-else-if="row.pay_float_type == 1" style="color: #67c23a">
              {{ (row.pay_float_lv * 100) | numbertwo }}%
              <i class="el-icon-bottom"></i>
            </div>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column
        label="提交时间"
        align="center"
        prop="addtime"
      ></el-table-column>
      <el-table-column
        label="审核时间"
        align="center"
        prop="examinetime"
      ></el-table-column>
      <el-table-column
        label="备注"
        align="center"
        prop="remarks"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <el-table-column
        label="原因"
        align="center"
        prop="reason"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <el-table-column
        label="图片"
        align="center"
        prop="images"
      >
       <template scope="{ row }">
        <div v-if="row.images.length">
          <el-image :src="item.url" fit="fill" v-for="(item,index) in row.images" :key="index" @click="handlePictureCardPreview(item)"></el-image>
        </div>
       </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right">
        <template slot-scope="{ row }">
          <div>
            <el-button
              type="text"
              @click="onEdit(row.id, row.type_no, row.reason, row.images)"
              v-if="
                row.status == 0 ||
                row.status == 3 ||
                row.status == 4 ||
                row.status == 5
              "
              >编辑</el-button
            >
          </div>
          <div>
            <el-button
              type="text"
              @click="onSubmit(row.id)"
              v-if="
                row.status == 0 ||
                row.status == 3 ||
                row.status == 4 ||
                row.status == 5
              "
              >提交</el-button
            >
          </div>
          <!-- <div>
            <el-button
              type="text"
              size="default"
              @click="onExamine(row.id)"
              v-if="row.status == 1"
            >审核</el-button>
          </div>-->
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :form="form"
      :total="total"
      @paginationPostOrderTaskList="postAdminPricingGetPricingExamine"
    />
    <!-- 审核 -->
    <el-dialog
      title="审核"
      :visible.sync="auditdialogVisible"
      :lose-on-click-modal="false"
      width="30%"
    >
      <div>
        <el-radio v-model="auditform.status" :label="1">通过</el-radio>
        <el-radio v-model="auditform.status" :label="0">拒绝</el-radio>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="auditdialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onExamineAuditAffirm"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <DialogNuclearpriceList
      :dialogVisible="dialogVisible"
      :type_no="type_no"
      :reason="reason"
      :images="images"
      :id="id"
      @handleChangedialogVisible="handleChangedialogVisible"
      @onSearch="onSearch"
    />
    <el-dialog :visible.sync="dialogVisibleImage" :modal="false">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import {
  postAdminPricingGetPricingExamine,
  postAdminPricingGetPricingSubmitExaminePricing,
  postAdminPricingGetPricingSetExaminePricing,
  postHomeCodeGetFactory,
  postAdminPricingGet_shujia_PricingExamine,
} from "@/api";
import pagination from "@/components/pagination.vue";
import DialogNuclearpriceList from "@/components/DialogNuclearpriceList.vue";
export default {
  components: { pagination, DialogNuclearpriceList },
  data() {
    return {
      loading: false,
      dialogVisible: false,
      auditdialogVisible: false,
      dialogVisibleImage:false,
      dialogImageUrl:"",
      savetime: "",
      type_no: "", // 选中的款号
      id: "", //选中id
      factoryList: [],
      formNuclearprice: {},
      reason: "",
      images: [],
      options: [
        {
          value: "",
          label: "全部",
        },
        {
          value: 0,
          label: "未提交",
        },
        {
          value: 1,
          label: "未审核",
        },
        {
          value: 2,
          label: "已通过",
        },
        {
          value: 3,
          label: "未通过",
        },
        {
          value: 4,
          label: "已取消",
        },
        {
          value: 5,
          label: "已撤回",
        },
      ],
      form: {
        supplier_id: "",
        type_no: "",
        processing_code: "",
        status: "",
        page: 1,
        size: 10,
      },
      auditform: {
        status: 1,
      },
      tableData: [],
      total: 1,
      // 审核
      ExtraAudit: {
        id: "",
        status: 1,
      },
    };
  },
  activated() {
    let processing_code = this.$route.query.processing_code;
    if (processing_code) {
      this.form.processing_code = processing_code;
    }
    let form = this.form;
    this.postHomeCodeGetFactory();
    this.postAdminPricingGetPricingExamine(form);
  },
  methods: {
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisibleImage = true;
    },
    // 审批进度
    onLookRun(id, type, run_id) {
      this.$router.push({ name: "contractrunid", query: { id, type, run_id } });
    },
    // 查看
    onLook(id) {
      this.$router.push({ name: "NuclearpriceListDetail", query: { id } });
    },
    // 更新核价单
    onUpdate() {
      this.loading = true;
      let form = this.form;
      postAdminPricingGet_shujia_PricingExamine().then((res) => {
        this.postAdminPricingGetPricingExamine(form);
      });
    },
    changeCellStyle(row, column, rowIndex, columnIndex) {
      if (
        row.column.property == "big_pricing_number" ||
        row.column.property == "big_pricing_price" ||
        row.column.property == "process_pricing_price"
      ) {
        return "background:#F5FBFF"; //修改的样式
      } else if (
        row.column.property == "pay_pricing_number" ||
        row.column.property == "pay_pricing_price" ||
        row.column.property == "pay_process_price"
      ) {
        return "background:#FDFDF9";
      } else if (
        row.column.property == "pay_float" ||
        row.column.property == "pay_float_lv"
      ) {
        return "background:#F9FFFA";
      }
    },
    changeHeaderCellStyle(row, column, rowIndex, columnIndex) {
      if (
        row.column.property == "big_pricing_number" ||
        row.column.property == "big_pricing_price" ||
        row.column.property == "process_pricing_price" ||
        row.column.label == "大货"
      ) {
        return "background:#F5FBFF"; //修改的样式
      } else if (
        row.column.property == "pay_pricing_number" ||
        row.column.property == "pay_pricing_price" ||
        row.column.property == "pay_process_price" ||
        row.column.label == "实付"
      ) {
        return "background:#FDFDF9";
      } else if (
        row.column.property == "pay_float" ||
        row.column.property == "pay_float_lv" ||
        row.column.label == "历史价格变动(本次实付总价-首单实付总价)"
      ) {
        return "background:#F9FFFA";
      }
    },
    // 加工厂列表
    postHomeCodeGetFactory() {
      let obj = {
        page: 1,
        size: 1000,
      };
      postHomeCodeGetFactory(obj).then((res) => {
        this.factoryList = res.data;
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 确认审核
    onExamineAuditAffirm() {
      let { form, auditform } = this;
      postAdminPricingGetPricingSetExaminePricing(auditform).then((res) => {
        this.auditdialogVisible = false;
        let text;
        if (auditform.status == 1) {
          text = "审核通过";
        } else {
          text = "审核不通过";
        }
        this.$message(text);
        this.postAdminPricingGetPricingExamine(form);
      });
    },
    // 审核
    onExamine(e) {
      this.auditform.id = e;
      this.auditdialogVisible = true;
    },
    // 详情
    onContractReconciliationDetail(Priceid) {
      this.$router.push({
        name: "ContractReconciliationDetail",
        query: { Priceid },
      });
    },
    // 删除
    onSubmit(id) {
      this.loading = true;
      let form = this.form;
      let obj = {
        id,
      };
      this.$confirm("确定提交审核该成品加工单核价审核？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          postAdminPricingGetPricingSubmitExaminePricing(obj)
            .then((res) => {
              this.postAdminPricingGetPricingExamine(form);
              this.$message({
                type: "success",
                message: "提交成功!",
              });
              this.loading = false;
            })
            .catch((err) => {
              this.loading = false;
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消提交",
          });
          this.loading = false;
        });
    },
    handleChangedialogVisible() {
      this.id = "";
      this.type_no = "";
      this.dialogVisible = false;
    },
    // 编辑
    onEdit(id, type_no, reason, images) {
      this.type_no = type_no;
      this.id = id;
      this.dialogVisible = true;
      this.reason = reason;
      this.images = images;
    },
    // 采购列表
    async postAdminPricingGetPricingExamine(data) {
      this.loading = true;
      this.form = data;
      postAdminPricingGetPricingExamine(data)
        .then((res) => {
          this.loading = false;
          console.log("采购列表", res);
          this.savetime = res.savetime;
          this.tableData = res.data;
          this.total = Number(res.total);
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    // 搜索
    onSearch() {
      this.form.page = 1;
      this.form.size = 10;
      this.postAdminPricingGetPricingExamine(this.form);
    },
  },
};
</script>

<style lang="scss" scoped>
.myform {
  display: flex;
  justify-content: space-between;
  > div {
    display: flex;
  }
  &-item {
    margin-right: 10px;
  }
}
.WorkingSchedule {
  background: #ffff;
  padding: 20px;
  border-radius: 2px;
  @include boxShadow;
  /deep/ .el-table__row {
    td:not(.is-hidden):last-child {
      right: -1px;
    }
  }
}
</style>
